<template>
	<view class="">
		<!-- 搜索组件 -->
		<v-search @jumpsearchpage="jumpsearchpage"></v-search>
		<view class="scroll-view-container">
			<!-- 左侧滚动容器 -->
			<scroll-view scroll-y="true" class="left-scroll-view" :style="{height:wh+'px'}">
				<view v-for="(item,i) in categorylist" :key="item.cat_id" class="left-scroll-view-item"
					:class="{active:item.cat_id==activeid}" @click="getcateid(item.cat_id,i)">{{item.cat_name}}</view>
			</scroll-view>
			<!-- 右侧滚动容器 -->
			<scroll-view scroll-y="true" class="right-scroll-view" :style="{height:wh+'px'}" :scroll-top="scrolltop">
				<!-- //二级导航标题 -->
				<view class="" v-for="(v2,i) in catelevel2" :key="i">
					<!-- 标题模块区域 -->
					<view class="right-scroll-view-item">/{{v2.cat_name}}/</view>
					<!-- 商品区域 -->
					<view class="right-scroll-view-item-all">
						<view class="right-scroll-view-items" v-for="(v3,i) in v2.children" :key="i">
							<!-- 图片 -->
							<view class="right-scroll-view-item-pic">
								<image :src="v3.cat_icon" mode="" @click="jumpshoppage(v3.cat_id)"></image>
							</view>
							<!-- 文字 -->
							<view class="right-scroll-view-item-text">
								{{v3.cat_name}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 定义一个变量保存可用窗口高度
				wh: "",
				// 定义一个商品列表数据
				categorylist: "",
				//控制激活的样式属性
				activeid: 1,
				//定义二级导航商品数据
				catelevel2: [],
				// 控制滚动条位置
				scrolltop:0
				
			};
		},
		methods: {
			//定义一个获取商品数据的函数
			getcategorylist() {
				uni.request({
					url: "https://api-hmugo-web.itheima.net/api/public/v1/categories",
					method: "GET",
					// success(res) {
					// 	console.log(res);
					// 	console.log(this);
					// }
					success: ({
						data: res
					}) => {
						console.log(res);
						if (res.meta.status !== 200) return uni.$showMsg()
						this.categorylist = res.message
						// console.log(this);此处this时vuecomponent的实例对象
						// 初始化2级导航数据
						this.catelevel2 = res.message[0].children
						// console.log(this.catelevel2);
						
					}
				})
			},
			//获取点击的商品的id，用于激活样式
			getcateid(id,i) {
				// 点击商品列表时 拿到列表id和索引,用于获取二级数据
				this.activeid = id
				this.catelevel2=this.categorylist[i].children
				//切换一级列表时，重置滚动条
				this.scrolltop=this.scrolltop===0? 1 : 0
			},
			//点击商品时跳转到商品列表 并传递该商品id
			jumpshoppage(cid){
				uni.navigateTo({
					url:"/subpckA/good_list/good_list?cid="+cid,
				})
			},
			// 跳转搜索页面自定义事件的回调
			jumpsearchpage(){
				// console.log("自定义事件触发了");
				uni.navigateTo({
					url:"/subpckA/search/search"
				})
			}
		},
		//onload页面的生命周期函数 该页面加载时触发 常用于请求数据
		onLoad() {
			//uniapp获得系统信息api
			// uni.getSystemInfo().then((res)=>{
			// 	console.log(res[1].windowHeight);
			// },(err)=>{
			// 	throw new Error(err)
			// })
			// 页面加载后,获取页面可用窗口高度
			this.wh = uni.getSystemInfoSync().windowHeight-50
			// console.log(typeof(this.wh))
			//页面加载时调用获取商品数据函数
			this.getcategorylist()
			
		}
	}
</script>

<style lang="scss">
	.scroll-view-container {
		text-align: center;
		display: flex;

		.left-scroll-view {
			// height: 300px;
			width: 120px;

			.active {
				position: relative;

				&::before {
					content: "";
					display: block;
					width: 3px;
					height: 30px;
					background-color: red;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translate(0, -50%);
				}
			}

			.left-scroll-view-item {
				background-color: bisque;
				line-height: 60px;
				font-size: 12px;
			}

		}
		
		.right-scroll-view {
			width: 300px;
			// height:300px;
			.right-scroll-view-item-all{
				display: flex;
				flex-wrap: wrap;
				.right-scroll-view-items{
					width: 33.33%;
					.right-scroll-view-item-pic{
						image{
							margin: 10px;
							width: 60px;
							height: 60px;
						}
					}
				}

			}

		}
	}
</style>